<template>
	<view>
		<view class="ztbox">
			<view class="zitem" v-for="(item,index) in ztitle" :key="index" @click="changeStatus(index,item)">
				<text :class="[zindex==index?'active':'t']">{{item.title}}</text>
			</view>
		</view>
		<view style="height: 100rpx;">

		</view>

		<view class="orderPage">
			<view class="row" v-for="item in orderList" :key="item._id" @click="goDetail(item)">
				<view class="head">
					<view class="number" style="font-size: 25rpx;" v-if="true">订单号:{{item.out_trade_no}}</view>

					<view class="state">
						<u-icon name="weixin-fill" size="22" color="#04C15F" v-if="item.payType == 'wxpay'"></u-icon>
						<u-icon name="zhifubao" size="22" color="#1578FF" v-if="item.payType == 'alipay'"></u-icon>
						<text :class="item.status==-2?'err':''">
							{{statusText(item.status)}}
						</text>
					</view>
				</view>
				<view class="body" v-if="item.orderType!='payment'">
					<view style="display: flex;">
						<view class="" v-for="(imgitem,imgindex) in item.carsList" :key="imgindex">
							<image :src="imgitem.thumb[0].url" mode=""
								style="width: 100rpx;height: 100rpx;margin-right: 10rpx">
							</image>
						</view>
					</view>
					<view class="">
						{{getCarsListName(item.carsList)}}
					</view>
				</view>
				<view class="body" v-else>直接转账给商家</view>

				<view class="s" v-if="item.deliveryInfo.address">
					收货地址：{{item.deliveryInfo.address}}
				</view>
				<view class="s" v-if="item.deliveryInfo.username">
					收货人：{{item.deliveryInfo.username}}-{{item.deliveryInfo.mobile}}
				</view>
				<view class="s" v-if="item.wuliuOrder">
					物流单号：{{item.wuliuOrder}}
				</view>

				<view class="footer">
					<view class="time">{{timeFormat(item.createTime,'yyyy-MM-dd hh:mm')}}</view>
					<view class="count" v-if="item.orderType!='payment'">
						共{{item.carsList.length}}件商品 ，实付<text class="price">￥{{priceFormat(item.total_fee)}}</text>
					</view>
				</view>
				<view class="btnGroup">
					<button type="primary" size="mini" style="margin-right: 30rpx;"
						@click.stop="copy(item)">一键复制地址</button>

					<button type="primary" :disabled="item.done" size="mini" v-if="!item.done"
						@click.stop="openWuliu(item._id)">填写物流单号</button>

					<button type="warn" :disabled="item.done" size="mini" style="margin-left: 20rpx;" v-if="!item.done"
						@click.stop="tuiBox(item)">退款</button>

				</view>

			</view>

			<view v-if="noData" class="pageNoData">没有更多数据了</view>

		</view>

		<!-- 增加物流单号弹出框 -->
		<u-modal :show="showwuliu" showCancelButton title="请输入该商品的物流单号" @confirm="wuLiuConfirm" @cancel="wuLiuCancel">
			<u--input placeholder="请输入该商品的物流单号" border="surround" clearable type="text" v-model="wuliuOrder"
				autoBlur></u--input>
		</u-modal>

		<!-- 支付组件 -->
		<uni-pay ref="pay"></uni-pay>


	</view>
</template>

<script>
	import {
		priceFormat,
		timeFormat
	} from "@/utils/tools.js"
	const orderCloudObj = uniCloud.importObject("kt-mall-order", {
		customUI: true
	});

	export default {
		data() {
			return {
				orderList: [],
				pageNum: 1,
				noData: false,
				showwuliu: false,
				wuliuOrder: '',
				id: '',
				ztitle: [{
					title: "未发货",
					done: false
				}, {
					title: "已发货",
					done: true
				}],
				zindex: 0,
				done: false
			};
		},
		onLoad() {
			this.zindex = 0
			this.done = false
			this.initOrder()
			this.getOrderList();
		},
		onReachBottom() {
			if (this.noData) return;
			this.pageNum++;
			this.getOrderList();
		},
		methods: {
			priceFormat,
			timeFormat,
			// 退款确认框
			tuiBox(item) {
				var that = this
				uni.showModal({
					title: '警告',
					content: `退款金额为${this.priceFormat(item.total_fee)}元?`,
					cancelText: "取消",
					confirmText: "确认",
					confirmColor: 'red',
					cancelColor: '#000000',
					success: function(res) {
						if (res.confirm) {
							// 执行确认后的操作
							that.wuliuOrder = ''
							that.tuiMoney(item.out_trade_no)
							that.orderDoneTui(item._id)
						} else {
							// 执行取消后的操作
						}
					}
				})
			},
			// 退款
			async tuiMoney(out_trade_no) {
				let res = await this.$refs.pay.refund({
					out_trade_no: out_trade_no, // 插件支付单号
				});
				console.log('退款信息', res);
				if (res.errCode == 0) {
					uni.showToast({
						icon: 'success',
						title: '退款成功!'
					})
				}
			},
			//退款后调用云函数修改订单状态
			orderDoneTui(id) {
				orderCloudObj.updateDoneTui(id).then(res => {
					this.initOrder()
					this.getOrderList();
				})
			},
			// 复制收货地址
			copy(params) {
				let address = params.deliveryInfo.address + ',' + params.deliveryInfo.username + ',' + params.deliveryInfo
					.mobile
				uni.setClipboardData({
					data: address,
					success: function() {
						uni.showToast({
							icon: 'success',
							title: '一键复制成功!'
						})
					}
				});
			},
			// 修改文字状态
			changeStatus(index, item) {
				this.zindex = index
				this.done = item.done
				this.initOrder()
				this.getOrderList()
			},

			// 打开物流弹出框
			openWuliu(id) {
				this.wuliuOrder = ''
				this.id = id
				this.showwuliu = true
			},
			// 输入物流成功确认框
			wuLiuConfirm() {
				this.showwuliu = false
				this.orderDone(this.id)
			},
			// 输入物流取消框时
			wuLiuCancel() {
				this.showwuliu = false
			},

			// 初始化订单
			initOrder() {
				this.pageNum = 1
				this.orderList = []
				this.noData = false
			},
			//获取订单列表
			async getOrderList() {
				let res = await orderCloudObj.getAllList(this.pageNum, this.done);
				if (res.data == 0) this.noData = true;
				let newData = [...this.orderList, ...res.data];
				this.orderList = newData
			},

			//支付状态的显示
			statusText(value) {
				let obj = {
					"-2": "支付异常",
					"-1": "已关闭",
					"1": "已支付",
					"0": "未支付",
					"2": "已部分退款",
					"3": "已全额退款"
				};
				return obj[value]
			},


			//跳转到详情页
			goDetail(value) {
				let params = encodeURI(JSON.stringify(value));
				uni.navigateTo({
					url: "/pages/order/detail?item=" + params
				})
			},
			//将购物车列表遍历生成名称
			getCarsListName(arr) {
				let name = arr.map(item => {
					return item.name
				})
				return name.join(" / ")
			},
			//点击完成订单并传物流单号
			orderDone(id) {
				orderCloudObj.updateDone(id, this.wuliuOrder).then(res => {
					this.initOrder()
					uni.showToast({
						icon: 'success',
						title: '订单完成成功'
					})
					this.getOrderList();
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-bg-color;
	}

	.ztbox {
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		width: 750rpx;
		height: 100rpx;
		display: flex;
		background-color: #fff;
		z-index: 999999;

		.zitem {
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;

			.t {
				padding-bottom: 10rpx;
				color: #000;
			}

			.active {
				padding-bottom: 10rpx;
				border-bottom: 4rpx solid rgb(4, 193, 95);
				color: #19be6b;
			}
		}
	}

	.orderPage {
		padding: 30rpx;

		.row {
			background: #fff;
			padding: 40rpx 20rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			.head {
				@include flex-box();
				font-size: 32rpx;

				.number {
					@include flex-box-set(start);

					.way {
						background: #19be6b;
						color: #fff;
						font-size: 22rpx;
						padding: 6rpx 20rpx;
						border-radius: 30rpx;
						margin-left: 10rpx;

						&.self {
							background: #FF9100;
						}
					}
				}

				.state {
					color: $brand-theme-color-aux;
					@include flex-box-set(start);
					font-size: 26rpx;

					.err {
						color: #F56C6C;
					}
				}
			}

			.body {
				border: 1px solid $border-color;
				padding: 30rpx 20rpx;
				border-radius: 10rpx;
				background: #F9F9F9;
				font-size: 34rpx;
				margin: 20px 0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}

			.s {
				margin-bottom: 20rpx;
				font-size: 28rpx;
				color: #a5a5a5;
			}

			.footer {
				@include flex-box();
				font-size: 26rpx;
				color: #a5a5a5;

				.price {
					font-weight: bold;
					color: #000;
				}
			}

			.btnGroup {
				padding-top: 30rpx;
				position: relative;
			}
		}
	}

	.pageNoData {
		padding: 10rpx 0 50rpx;
		text-align: center;
		color: #666;
	}
</style>